<template>
<XtxBread>
    <XtxBreadItem to="/">首页</XtxBreadItem>
    <XtxBreadItem v-if="category.top" :to="`/category/${category.top.id}`">{{ category.top.name }}</XtxBreadItem>
    <Transition name="fade-right" mode="out-in">
        <XtxBreadItem v-if="category.sub" :key="category.sub.id">{{ category.sub.name }}</XtxBreadItem>
    </Transition>
</XtxBread>
</template>

<script setup>
import { useCategoryStore } from '@/stores'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import XtxBread from "@/components/library/xtx-bread.vue";
import XtxBreadItem from "@/components/library/xtx-bread-item.vue";

// 1. 获取二级分类的ID，在地址路由中
const route = useRoute()
// 2. 获取pinia中的类目数据
const store = useCategoryStore()
// 3. 通过计算属性得到，二级类目的名称和ID，一级类目的名称和ID
const category = computed(() => {
    const obj = {}
    console.log(store.categoryList)
    store.categoryList.forEach(top => {
        top.children && top.children.forEach(sub => {
            if (sub.id === route.params.id) {
                // 设置二级类目
                obj.sub = {
                    id: sub.id,
                    name: sub.name
                }
                // 设置一级类目
                obj.top = {
                    id: top.id,
                    name: top.name
                }
            }
        })
    })
    return obj
})
</script>

<style scoped lang="less">

</style>